<template>
  <div class="template-wrap">
    <menu-top></menu-top>
    <div class="content">
      <div class="content-wrap">
        <div>
          <menu-left ref="left" :href="href"></menu-left>
        </div>
        <el-col>
          <div class="company-list-wrap right-content">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/companyList' }">相关公司</el-breadcrumb-item>
              <el-breadcrumb-item>公司列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="wrap">
              <rotate-message></rotate-message>
              <div class="wrap-container">
                <div class="title-nav">查询及添加
                    <div class="btns">
                        <div @click="getProductPage" class="btn">查询</div>
                        <!-- <div @click="addBtn" class="btn edit">添加</div> -->
                    </div>
                </div>
                <div class="filter-wrap">
                    <div class="filter-item">
                        企业名称:
                        <el-input  v-model="companyNameLike" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="filter-item">
                        融资轮次:
                        <el-select filterable v-model="financeLevel" width="10" placeholder="请选择">
                            <el-option
                            label="全部"
                            value="">
                            </el-option>
                            <el-option
                                v-for="item in financeArr"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="filter-item">
                        状态:
                        <el-select v-model="canFinancing" filterable width="10" placeholder="请选择">
                            <el-option
                            label="全部"
                            value="">
                            </el-option>
                            <el-option
                                v-for="item in stateArr"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="table-wrap">
                    <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                        <el-table-column
                        :formatter="formatter"
                        prop="companyName"
                        align="center"
                        label="企业名称">
                        </el-table-column>
                        <el-table-column
                        :formatter="formatter"
                        prop="companyBase.parentChannelName"
                        align="center"
                        label="推荐机构来源">
                        </el-table-column>
                        <el-table-column
                        :formatter="formatter"
                        label="融资轮次"
                        align="center"
                        prop="financeLevelDesc">
                        </el-table-column> 
                        <el-table-column
                        :formatter="formatter"
                        prop="ultimateOwner"
                        align="center"
                        label="融资最大股东">
                        </el-table-column> 
                        <el-table-column
                        :formatter="formatter"
                        prop="auditStatusDesc"
                        align="center"
                        label="当前状态">
                        </el-table-column>
                        <!-- <el-table-column min-width="100" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button  @click="$router.push({path: '/companyDetail?id='+scope.row.id+'&name='+scope.row.companyName, query: {main_path: '/companyList'}})" size="small" type="success">编辑</el-button>
                                <el-button v-if="scope.row.status == 'off'" @click="stateChange(scope.row.id,'on')" size="small" type="warning">上架</el-button>
                                <el-button v-if="scope.row.status == 'on'" @click="stateChange(scope.row.id,'off')" size="small" type="warning">下架</el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
let CONSTANT = require('../../../constant/constant.js'),
    common = require('../../../common.js');
import VueRouter from 'vue-router'
export default {
  name: 'menulist',
  data(){
    return{
      href:'',
      tableData: [],
      addressArr:[],
      financeArr:[],
      canFinancing:'',
      companyNameLike:'',
      financeLevel:"",
      stateArr:[
          {
              key:'y',
              value:'初审通过'
          },
          {
              key:'n',
              value:'待初审'
          }
      ]
    }
  },
  components: {
    'menu-top':() => import('../../common/Menu-Top'),
    'menu-left':() => import('../../common/Menu-Left'),
    "rotate-message": () => import("../../common/rotate-message")
  },  
  mounted(){
      this.getProductPage()
      this.getFinanceArr()
  },
  methods:{
      formatter(row, column, cellValue) {
        return cellValue ? cellValue : '- -'
      },
      addBtn(){

      },
      stateChange(id,state){
           this.$confirm(`确定${state == 'on'?'上架':'下架'}?`, '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.CHANNEL.ONOROFFUSER,
                    data = {
                        status:state,
                        userId:id
                    },
                    dataForm = {}
                    common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            message: `${state == 'on'?'上架':'下架'}成功！`,
                            type: 'success'
                        });
                        this.getProductPage()
                    }else{
                    
                    }
                })
            }).catch(() => {           
                this.$message({             
                    type: 'info',             
                    message: '已取消'           
                });                   
            });   

      },
      getFinanceArr(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'finance_level'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.financeArr= res.data.bussData
                }else{
                
                }
            })
        },
        giveTypeArr(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'give_type'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.giveArr= res.data.bussData
                }else{
                
                }
            })
        },
        getProductPage(){
            let  url = CONSTANT.URL.CHANNEL.FINDCOMPANYBYPAGE,
                data = {}
                if (this.financeLevel) {
                    data.financeLevel = this.financeLevel
                }
                if (this.canFinancing) {
                    data.canFinancing = this.canFinancing
                }
                if (this.companyNameLike) {
                    data.companyNameLike = this.companyNameLike
                }
                const dataForm = {
                    pageIndex:1,
                    pageSize:100
                }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.tableData = res.data.bussData;
                    }else{
                    }
                })
        },
  },
  watch: {  
      $route(to, from) {  
        // this.$refs.left.activePath()
      }  
  }
}
</script>

<style  lang="scss" scoped>
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.content{
  min-height: 100%;
  background-color: #f5f5f5;
  width: 81.3%;
  float: right;
}

.content-wrap{
  overflow: hidden;
}

.company-list-wrap{
  padding-top: 29px;
  .wrap{
    background-color: #f5f5f5;
    .title-head{
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      margin-top: 18px;
      padding-left: 20px;
      font-size: 14px;
      color: #666;
      span{
        color: #0087DC;
        cursor: pointer;
      }
    }
    .el-table__row{
        td{
            height: 50px;
            padding: 0;
        }
    }
    .wrap-container{
      padding: 11px 60px 33px 29px;
      background-color: #fff;
      margin-top: 20px;
      .filter-wrap{
            overflow: hidden;
            font-size: 16px;
            color: #666;
            border-bottom: 1px solid #E1E1E1;
            padding-bottom: 40px;
            .filter-item{
                float: left;
                margin-right: 30px;
            }
            .el-input{
                width: 150px;
                margin-left: 10px;
            }
            .el-select{
                width: 150px;
                margin-left: 10px;
            }
      }
      .title-nav{
        padding-bottom: 18px;
        padding-top: 10px;
        span{
            color: #111;
            font-weight: bold;
        }
        .btns{
            float: right;
        }
        .btn{
            display: inline-block;
            width: 70px;
            height: 30px;
            margin-left: 20px;
            background-color: #ED7018;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            &:hover{
                background-color: #ED9000;
                transition:all .2s linear
            } 
            &.edit{
                background-color: #999999;
                &:hover{
                    background-color: #777;
                } 
            }
        }
      }

    }
  }
.el-button--primary{
        border-radius: 4px;
        -webkit-border-radius: 4px;
        background-color: #ED7018;
        border: 0PX;
        &:hover{
        background-color: #ED9000;
        transition:all .2s linear
        } 
}
  .el-dialog__body{
      .el-input{
          width: 300px;
      }
    .el-form-item.stock{
        .el-input{
          width: 150px;
        }
        .el-select{
            width: 150px;
        }
    }
  }
}

a{
  text-decoration: none;
}
</style>